<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>CSS Transforms and Transitions</title>
    <style type="text/css">
        #box {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: red;

            /* 
            过渡
            设置旋转的过度要在2s内完成45度旋转。如果不设置旋转，旋转会非常快 

            transition: transform 2s;
            如果transform属性的值改变，要在指定时间内（此处2s）从当前 transform 值过渡到新的 transform 值。
            */
            transition: transform 2s;
            -webkit-transition: -webkit-transform 2s;
            -moz-transition: -moz-transform 2s;
            -o-transition: -o-transform 2s;
            -ms-transition: -ms-transform 2s;
        }

        /* 悬停状态 */
        #box:hover {
            /* 变换 
            transform 没有默认值，即没有变换。*/
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            background-color: green;

            /*透明度*/
            opacity: 20%;
        }
    </style>
</head>

<body>

    <div id="box"></div>
</body>

</html>